$(function () {
    $(window).on("load", () => {
        class lunBo {
            constructor() {
                this.index = 0;
                this.bindEvent();
                this.init()
            }
            init(){
                   // 获取cookie数据ID,TOKEN
                   this.ID = cookie("ID");
                   this.TOKEN = cookie("TOKEN");
   
                   if(this.ID.length > 0 && this.TOKEN.length > 0){
                       $("#userDropdown").css("display","flex");
                       // 存在免登录信息
                       this.getUserInfo();
                   }else{
                       $("#loginBtn").css("display","flex");
                       this.abort();
                   }
  
            }
            getUserInfo() {
                var _this = this;
                $.ajax({
                    url: "http://localhost:8888/users/info/" + this.ID,
                    headers: {
                        "authorization": this.TOKEN
                    },
                    dataType: "json",
                    
                }).then(function(res){
                 
                    $("#nickname").text(res.info.nickname);
                    console.log( _this.nickname);
                })
                
            }
            abort(){
                alert("请先登录");
                location.href = "./login.html"
            }
            bindEvent() {
                $(".button-next").click(() => {
                    if (this.index === 2) {
                        this.index = this.index;
                    } else {
                        this.index++;
                    }
                    // console.log(this.index);
                    $(".swiper-wrapper").animate({
                        left: -this.index * 297
                    })

                })
                $(".button-prev").click(() => {
                    if (this.index === 0) {
                        this.index = this.index;
                    } else {
                        this.index--;
                    }

                    $(".swiper-wrapper").animate({
                        left: -this.index * 297
                    })

                })


            }
        }
        new lunBo();


        class shopDetail {
            constructor() {
                this.init();

            }
            init() {
                this.data = null;

                this.goodslist = $(".swiper-slide");
                this.goods_item = $(".goods-item")
                this.goods_pic = $(".img_main");
                this.gcontainer = $(".gcontainer");
                // console.log(this.gcontainer);

                this.id = location.hash.split("=")[1];
                this.getData();

                //  获取cookie数据ID,TOKEN
                 this.ID = cookie("ID");
                 this.TOKEN = cookie("TOKEN");
 
                 if(this.ID.length > 0 && this.TOKEN.length > 0){
                     $("#userDropdown").css("display","flex");
                     // 存在免登录信息
                     this.getUserInfo();
                 }else{
                     $("#loginBtn").css("display","flex");
                   
                 }

            }
            getUserInfo() {
                var _this = this;
                $.ajax({
                    url: "http://localhost:8888/users/info/" + this.ID,
                    headers: {
                        "authorization": this.TOKEN
                    },
                    dataType: "json",
                    
                }).then(function(res){
                    $("#nickname").text(res.info.nickname);
                })
                
            }

            getData() {
                var _this = this;
                $.getJSON("../static/data/diamonds.json", function (json) {
                    let data = json.data;
                    // let arr = [];
                    // for(var i =20 ;i<26;i++){
                    //     arr.push(data[i])
                    // }
                    _this.render(data[_this.id - 1]);
                    _this.bindEvent(data)
                })
            }

            bindEvent(data) {

                let _this = this;

                $(".b12").click(function () {
                    $(".alert").addClass("alert-active")
                    setTimeout(() => {
                        $(".alert").removeClass("alert-active")
                    },2000)
                   
                    this.cart_data = _this.getCartData();

                    this.item = data[_this.id - 1];
                    if (_this.id in this.cart_data) {

                        this.cart_data[_this.id].count++;
                        // console.log(this.cart_data);
                    } else {
                        this.cart_data[_this.id] = data[_this.id - 1];

                    }
                    localStorage.setItem("shopdata", JSON.stringify(this.cart_data));

                })
                // $(".goods-item").click((e) => {
                //     this.go($(e.target).attr(this.id))
                //     let interval = setInterval(() => {
                //         window.location.reload()
                //     }, 500)
                //     clearInterval(interval);
                // })

            }


          
            getCartData() {
                try {
                    var car = JSON.parse(localStorage.getItem("shopdata"));
                    if (car == null) {
                        return {};
                    }
                    return car;
                } catch (e) {
                    return {};
                }
            }


            go(id) {
                location.href = "./goodsdet.html#id=" + id;
            }

            render(data) {
                //  console.log(data);
                //     console.log($(".or-img").attr("src"));
                // this.img.src = this.data.info.img_big_logo;
                this.gcontainer.html(`
               <div class="left1">
               <div class="small-ring">

                   <img src="https://fastdfscdn.darryring.com/group1/M00/02/E1/wKgclmEfPNyAP_Q6AAIkf30MNl4363.jpg"
                       class="small-img active1">
                   <img src="https://static.darryring.com/images/2019-10-29/15723400905db8017a50dc5.jpg"
                       class="small-img active2">
                   <img src="https://static.darryring.com/images/2019-10-29/15723400935db8017d7b4d2.jpg"
                       class="small-img active3">
                   <img src="https://static.darryring.com/images/2019-10-29/15723400995db801835ba61.jpg"
                       class="small-img active4">



               </div>
               
                  
                    
                <div class="scope" >
                    <div class="small-box" style="left:160px">
                        <img src="" style="position: absolute;
                        left: 0;">
                        <div class="square">
                            <img src=""/>
                        </div>
                    </div>
                </div>
                  
             

           </div>
           <div class="right1">
               <p class="rr1">求婚钻戒 ——产品编号 A16001</p>
               <div class="rr2">LOVE LINE系列 简奢款 求婚钻戒</div>
               <div class="top1">
                   <div class="topbox">
                       <span class="topbox-left1">材质</span>
                       <span class="topbox-right1">分色18K金
                           <span></span>
                       </span>
                   </div>
                   <div class="topbox">
                       <span class="topbox-left1">主钻</span>
                       <span class="topbox-right1">30分D色
                           <span></span>
                       </span>

                   </div>
                   <div class="topbox">
                       <span class="topbox-left1">尺寸</span>
                       <span class="topbox-right1">7
                           <span></span>
                       </span>

                   </div>
                   <div class="topbox">
                       <span class="topbox-left1">免费携刻</span>
                       <span class="topbox-right1 addthing">点此添加</span>

                   </div>
               </div>
                   <!-- ¥26239 -->
               <div class="goods-price">
                   <span class="money1">¥26239</span>
                   <span class="other">选择其它钻石定制此款</span>
               </div>

               <div class="goods-options">
                   <div class="btn ">
                       <span class="btn11">
                           <span class="b11">立即购买</span>
                       </span>
                       <span class="btn11 b12">
                           <span class="b22" id="${this.id}">放入购物袋</span>
                       </span>
                   </div>
                   <div class="btn">
                       <span class="btn13">
                           <div class="bt33">预约试戴</div>
                       </span>
                   </div>
               </div>
               <p class="delivery">
                   配送说明:预计15个工作日送达(限大陆地区),如需加急或者其他地区请咨询客服。
               </p>
               <div class="collect-block">
                   <div class="coleft coo">
                       <span>在线顾问</span>
                   </div>
                   <div class="comid coo">
                       <span>vip客服</span>
                   </div>
                   <div class="corig coo">
                       <span class=" colast">手机上查看</span>
                   </div>
               </div>

               <div class="share">
                   <span>分享</span>
                   <span>加至心愿单</span>
                   <span>电话咨询</span>
               </div>

               <div class="xijie">
                   <p class="xi1">细节描述</p>
                   <ul class="xi2">
                       <li>商品分类：求婚钻戒</li>
                       <li>净度：VS2</li>
                       <li>材质：分色18K金</li>
                       <li>系列名称：LOVE LINE系列</li>
                       <li>颜色:G</li>
                       <li>副石材质：钻石</li>
                       <li>主石大小：0.6</li>
                       <li>切工：EX</li>
                       <li>副石数量: 90-110</li>
                       <li>主石材质:钻石</li>
                       <li>产品编号: A16001</li>
                       <li>副石总重: 0.22-0.52</li>
                       <li>主石数量: 1</li>
                       <li>形状:圆形</li>
                       <li>抛光: EX</li>
                       <li>对称: EX</li>
                       <li>荧光: NON</li>
                   </ul>
               </div>

               <p class="more">查看更多+</p>
               <div class="topla">
                   <span class="ping1">评价</span>
                   <span class="dayu">></span>
               </div>
               <div class="topla la2">
                   <span class="ping1">服务</span>
                   <span class="dayu">></span>
               </div>
           </div>`)

                // console.log(this.id);
                $(".money1").text(data.price);
                $(".or-img").attr("src", data.img)
                $(".scope .small-box img").attr("src", data.img)
                $(".active1").attr("src", data.img)
                $(".active2").attr("src", data.img_hover)
                $(".rr2").text(data.name)
                let scope = new myscope()
                scope.init()

                //left-img1
                $(".active1").hover(function () {
                    $(".active1").css({
                        border: "2px solid #9c827d",
                        scale: "0.7",
                        "box-sizing": "border-box",
                    })
                    $(".or-img").attr("src", $(".active1").attr("src"))
                    $(".scope .small-box img").attr("src", $(".active1").attr("src"))
                }, function () {
                    $(".active1").css({
                        border: "none",
                        scale: "1",
                    })
                })
                //left-img2
                $(".active2").hover(function () {
                    $(".active2").css({
                        border: "2px solid #9c827d",
                        scale: "0.7",
                        "box-sizing": "border-box",
                    })
                    $(".or-img").attr("src", $(".active2").attr("src"))
                    $(".scope .small-box img").attr("src", $(".active2").attr("src"))
                }, function () {
                    $(".active2").css({
                        border: "none",
                        scale: "1",
                    })
                })
                //left-img3
                $(".active3").hover(function () {
                    $(".active3").css({
                        border: "2px solid #9c827d",
                        scale: "0.7",
                        "box-sizing": "border-box",
                    })
                    $(".or-img").attr("src", $(".active3").attr("src"))
                    $(".scope .small-box img").attr("src", $(".active3").attr("src"))
                }, function () {
                    $(".active3").css({
                        border: "none",
                        scale: "1",
                    })
                })
                //left-img4
                $(".active4").hover(function () {
                    $(".active4").css({
                        border: "2px solid #9c827d",
                        scale: "0.7",
                        "box-sizing": "border-box",
                    })
                    $(".or-img").attr("src", $(".active4").attr("src"))
                    $(".scope .small-box img").attr("src", $(".active4").attr("src"))
                }, function () {
                    $(".active4").css({
                        border: "none",
                        scale: "1",
                    })
                })



            }


        }

        new shopDetail;



        // class Magnifier{
        //     constructor(options){

        //         this.img = document.querySelector(options.img);
        //         this.focus = document.querySelector(options.focus);
        //         this.big_img = document.querySelector(options.big);

        //         //给大图增加position:absolute
        //         this.big_bg = document.querySelector(options.big_img);

        //         //big-img大小比例
        //         this.scale = 0.6;

        //         this.init();
        //         //为了获取元素的偏移距离，计算focus位置
        //         this.container = document.querySelector(options.el);
        //         //container位置

        //         this.c_off = {
        //             left : this.container.offsetLeft,
        //             top  : this.container.offsetTop,
        //       }

        //         // offset 家族是没办法测量 display 为none 的元素; 
        //         //获取focus位置
        //         this.f_style = getComputedStyle(this.focus);
        //         //img框位置
        //         this.i_style = getComputedStyle(this.img);

        //         //边界检测
        //         this.boundary = {
        //             x : {
        //                 min : 0,
        //                 max : parseInt(this.i_style.width) - parseInt(this.f_style.width)
        //             },
        //             y : {
        //                 min : 0,
        //                 max : parseInt(this.i_style.height) - parseInt(this.f_style.height)
        //             }
        //         }

        //         this.bindEvent();
        //     }

        //     init(){
        //         this.focus.style.width = 202 * this.scale + "px";
        //         this.focus.style.height = 202 * this.scale + "px";

        //         this.big_img.style.width = 502 * this.scale + "px";
        //         this.big_img.style.height = 502 * this.scale + "px";
        //     }

        //     bindEvent(){

        //         //鼠标移入事件
        //         this.img.addEventListener("mouseover" , () => {
        //             //显示
        //             this.show();
        //         })

        //         //鼠标移出事件
        //         this.img.addEventListener("mouseout" , () => {
        //             //隐藏
        //             this.hidden();
        //         })

        //         // 鼠标移动focus
        //         this.img.addEventListener("mousemove" , ( e ) => {
        //             //focus移动
        //             this.move(e.pageX , e.pageY);
        //         })
        //     }
        //     show(){
        //         this.focus.style.display = "block";
        //         this.big_img.style.display = "block";
        //     }

        //     hidden(){
        //         this.focus.style.display = "none";
        //         this.big_img.style.display = "none";
        //     }

        //     move(x,y){
        //         //测量x,y的值
        //         //c-container , f- focus
        //         //鼠标的定位是根据浏览器可视见面
        //         //focus的定位是根据container 所以会出现一个差值
        //         x = x - this.c_off.left - parseInt(this.f_style.width) / 2;
        //         y = y - this.c_off.top - parseInt(this.f_style.height) / 2;

        //         //判断边界
        //         x = x <= this.boundary.x.min ? this.boundary.x.min : x;
        //         x = x >= this.boundary.x.max ? this.boundary.x.max : x;

        //         y = y <= this.boundary.y.min ? this.boundary.y.min : y;
        //         y = y >= this.boundary.y.max ? this.boundary.y.max : y;

        //         //focus赋值
        //         this.focus.style.left = x + "px";
        //         this.focus.style.top = y + "px"

        //         //跟随focus移动
        //         this.big_bg.style.left = -x * ( 502 / 202 )  + "px"
        //         this.big_bg.style.top = -y * ( 502 / 202 ) + "px"
        //     }

        // } 

        // new Magnifier;



    })


})